<template>
  <!--pages/login/index.wxml-->
  <view class="login_box">
    <view class="tabbarTop">
      <mineNavbar :styleData="styleData"></mineNavbar>
    </view>
    <view class="top">
      <image src="http://sb9sps5gr.hn-bkt.clouddn.com/bgImg.png" />
      <view class="middle">
        <image src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/10/a51db8a444b94f97b960f747d6fcd145.png" />
        <text>零工就业招聘驿站</text>
      </view>
    </view>
    <view class="bottom">
      <view class="b_login">
        <button :class="!isAgree ? 'first' : 'argee'" open-type="getPhoneNumber" :disabled="isAgree"
          @getphonenumber="getPhoneNumber">
          手机号快捷登录
        </button>
        <view class="secent" @click="verifyLogin">短信验证登录</view>
      </view>
      <view class="b_agreement">
        <image src="@/static/images/recruit/single-choice-unsele.png" v-if="isAgree" @click="changeIcon" />
        <image src="@/static/images/recruit/single-choice-unsele1.png" v-else @click="changeIcon" />
        <view>
          <text class="t_one">我已阅读并同意</text>
          <text class="t_two" @click="handleToUserAgreement">《用户协议》</text>
          <text class="t_three" @click="handleToPrivacy">《隐私政策》</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { wxLogin, xcxLogin } from "@/api/login";
import { setToken } from "@/utils/auth";
import { mapState } from "vuex";

export default {
  components: {},
  data() {
    return {
      styleData: {
        text: "",
        show: true,
      },
      isAgree: true,
    };
  },
  computed: {
    ...mapState(["userType"]),
  },
  watch: {},
  async onLoad(options) {
    console.log(this.userType);
  },
  async onShow() { },
  onReady() { },
  methods: {
    // 勾选同意用户协议
    changeIcon() {
      this.isAgree = !this.isAgree;
    },
    // 短信验证登陆
    verifyLogin() {
      uni.navigateTo({
        url: "/pages/recruit/login/verifyLogin/index",
      });
    },
    // 微信授权登陆
    async getPhoneNumber(e) {

      let that = this;
      const { code, errMsg } = e.detail;
      const phoneCode = code;
      if (errMsg == "getPhoneNumber:ok") {
        uni.login({
          provider: "weixin",
          onlyAuthorize: true, // 微信登录仅请求授权认证
          success(res) {
            if (res.errMsg == "login:ok") {
              wxLogin({
                xcxCode: res.code,
              }).then((res) => {
                if (res.code == 200) {
                  xcxLogin({
                    code: phoneCode,
                    openid: res.data.openid,
                    type: that.userType,
                  }).then((res) => {
                    if (res.code == 200) {
                      setToken(res.data.token);
                      that.$store.dispatch("GetInfo");
                    }
                  });
                }
              });
            }
          },
        });
      }
    },
    // 跳转用户协议
    handleToUserAgreement() {
      uni.navigateTo({
        url: "/subPage/enterprise/mine/details/userAgreement?type=1",
      });
    },
    // 跳转隐私协议
    handleToPrivacy() {
      uni.navigateTo({
        url: "/subPage/enterprise/mine/details/privacy?type=2",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
/* pages/login/index.wxss */
.login_box {
  background: #fff;
  height: 100vh;

  .tabbarTop {
    position: relative;
    top: 0;
    left: 0;
    z-index: 99;
  }

  .top {
    width: 750rpx;
    height: 754rpx;
    position: absolute;
    top: 0;
    left: 0;

    image {
      width: 100%;
      height: 100%;
    }

    .middle {
      position: absolute;
      top: 60%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        width: 232rpx;
        height: 232rpx;
      }

      >text {
        margin-top: 10px;
        font-size: 28rpx;
      }
    }
  }

  .bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 754rpx;

    .b_login {
      .first {
        width: 420rpx;
        height: 98rpx;
        background: #ff9e24;
        border-radius: 49rpx;
        text-align: center;
        line-height: 98rpx;
        color: #fff;
        font-weight: 500;
        font-size: 32rpx;
      }

      .argee {
        width: 420rpx;
        height: 98rpx;
        background: #ffdeb4;
        border-radius: 49rpx;
        text-align: center;
        line-height: 98rpx;
        color: #fff;
        font-weight: 500;
        font-size: 32rpx;
      }

      .secent {
        width: 420rpx;
        height: 45rpx;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 32rpx;
        color: #000000a3;
        letter-spacing: 0;
        text-align: center;
        margin-top: 20px;
      }
    }

    .b_agreement {
      display: flex;
      align-items: center;
      margin-top: 284rpx;

      image {
        width: 14px;
        height: 14px;
      }

      >view {
        margin-left: 5px;
        color: #317ed0;
        font-size: 24rpx;

        .t_one {
          color: #000000a3;
        }
      }
    }
  }
}
</style>
